<template>
  <div class="login-wrap">
    <div class="login">
      <div class="title">
        API文档管理系统
      </div>
      <el-form :model="user" :rules="rules" ref="userForm" style="width:100%">
        <el-form-item prop="name">
          <el-input v-model="user.name" placeholder="请输入用户名">
            <span slot="prefix">
               &nbsp;<i class="iconfont">&#xe656;</i>
            </span>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="user.password" type="password" placeholder="请输入密码">
            <span slot="prefix">
               &nbsp;<i class="iconfont">&#xe61e;</i>
            </span>
          </el-input>
        </el-form-item>
        <el-form-item v-if="positionItem" prop="positionId">
          <el-select v-model="user.positionId" placeholder="请选择职位" style="width:100%">
            <el-option v-for="p in positionDate" :label="p.name" :value="p.id" :key="p.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="" v-if="!positionItem" @click="login('userForm')" style="width:100%">登录
      </el-button>
      <el-button type="primary" @click="" v-else @click="regist('userForm')" style="width:100%">注册</el-button>
      <div class="regist-tip" v-if="positionItem">
        已有账户，<a href="javascript:void(0)" @click="loginForm">立即登陆</a>
      </div>
      <div class="regist-tip" v-show="!positionItem">
        还没账户？<a href="javascript:void(0)" @click="registForm">立即注册</a>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
  .login-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: fixed;
    background-image: url(../img/login-bg.png);
    background-attachment: fixed;
    background-position: bottom center;
    background-repeat: no-repeat;
  }

  .login {
    width: 380px;
    border: 1px solid #ebeef5;
    background-color: #fff;
    -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    color: #303133;
    border-radius: 4px;
    overflow: hidden;
    background: rgba(255, 255, 255, .8);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    padding: 30px;
    box-sizing: border-box;
    .title {
      font-size: 22px;
      font-weight: bold;
      padding-bottom: 30px;
      color: #303133;
    }
    .regist-tip {
      text-align: center;
      font-size: 14px;
      padding: 15px 0;
      a {
        color: #409EFF;
      }
    }
  }
</style>
<script>
  import router from '../router'
  import http from '../api/http'
  import store from '../util/store'
  import {Message, Loading} from 'element-ui';

  export default {
    data() {
      return {
        positionDate: [],
        positionItem: false,
        user: {
          name: '',
          password: '',
          positionId: ''
        },
        rules: {
          name: [
            {required: true, message: '请输入帐号', trigger: 'blur'},
          ],
          password: [
            {required: true, message: '请输入密码', trigger: 'blur'},
            {min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur'}
          ],
          positionId: [
            {required: true, message: '请选择职位', trigger: 'blur'}
          ]
        }
      }
    },
    mounted() {
      this.initData()
    },
    methods: {
      initData() {
        http.get('position/list').then(response => {
          this.positionDate = response.data
        })
      },
      registForm() {
        this.positionItem = true
      },
      loginForm() {
        this.positionItem = false
      },
      login(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            http.post('user/login', this.user).then(response => {
              this.$message.success('登录成功')
              store.set('token', response.data.token)
              store.set('username', response.data.name)
              store.set('pm', response.data.pm)
              store.set('userId', response.data.id)
              router.push('/')
            })
          } else {
            return false
          }
        });
      },
      regist(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            http.post('user/regist', this.user).then(response => {
              this.$message.success('注册成功');
              this.positionItem = false
              this.user.name = ''
              this.user.password = ''
            });
          } else {
            return false
          }
        })
      }
    }
  }
</script>
